import React, { Component } from 'react';

import { Details } from "./style"

import { getDetail } from "../../service/https"

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';

class Detail extends Component {

    state = {
        shop: {},
        login:false,
        like:false,
        collect:false
    }

    fanHui=()=>{
        this.props.history.go(-1)
    }

    async componentDidMount() {
        // 网络请求
        let filmId = this.props.match.params.id - 0
        let ret = await getDetail({ filmId })
        console.log(ret);
        this.setState({
            shop: { ...ret.data.film }
        })

        // 判断是否登录
        if(localStorage.getItem("token")){
            this.setState({login:true})
        }
        // 判断是否点赞
        let likeArr = JSON.parse(localStorage.getItem("like"))
        let likeBool = likeArr.some(item=>item.id===this.state.shop.filmId)
        this.setState({
            like: likeBool
        })
        // 判断是否收藏
        let collectArr = JSON.parse(localStorage.getItem("collect"))
        let collectBool = collectArr.some(item=>item.id===this.state.shop.filmId)
        this.setState({
            collect: collectBool
        })
    }

    setLike=()=>{
        if(this.state.login){
            let obj = {id:this.state.shop.filmId,...this.state.shop}
            let arr = JSON.parse(localStorage.getItem("like"))
            arr.push(obj)
            localStorage.setItem("like",JSON.stringify(arr))
            this.setState({
                like:true
            })
        }else{
            if(window.confirm("您还尚未登录，点击确认跳转至登录")){
                this.props.history.push("/login")
            }
        }
    }
    setCollect=()=>{
        if(this.state.login){
            let obj = {id:this.state.shop.filmId,...this.state.shop}
            let arr = JSON.parse(localStorage.getItem("collect"))
            arr.push(obj)
            localStorage.setItem("collect",JSON.stringify(arr))
            this.setState({
                collect:true
            })
        }else{
            if(window.confirm("您还尚未登录，点击确认跳转至登录")){
                this.props.history.push("/login")
            }
        }
    }
    remLike=()=>{
        let arr = JSON.parse(localStorage.getItem("like"))
        arr = arr.filter(item=>item.id!==this.state.shop.filmId)
        localStorage.setItem("like",JSON.stringify(arr))
        this.setState({
            like:false
        })
    }
    remCollect=()=>{
        let arr = JSON.parse(localStorage.getItem("collect"))
        arr = arr.filter(item=>item.id!==this.state.shop.filmId)
        localStorage.setItem("collect",JSON.stringify(arr))
        this.setState({
            collect:false
        })
    }
    render() {
        let { shop } = this.state
        return (
            <Details>
                {
                    JSON.stringify(this.state.shop) !== "{}"
                        ?
                        <div>
                            <div className='top'><img src={shop.poster} alt="" /></div>
                            <div className='zhong'>
                                <h4>{shop.name}<span>{shop.filmType.name}</span></h4>
                                <span>{shop.category}</span>
                                <p>{shop.nation} | {shop.runtime}分钟</p>
                                <p>{shop.synopsis}</p>
                            </div>
                            <div className='xia'>
                                <h2>演职人员</h2>
                                <Swiper
                                    spaceBetween={50}
                                    slidesPerView={3}
                                >
                                    {
                                        shop.actors.map(item => {
                                            return (
                                                <SwiperSlide key={item.name}>
                                                    <div className="swiperWrapper">
                                                        <div className="swiperSlide">
                                                            <div className='imgBox'>
                                                                <img src={item.avatarAddress} alt="" />
                                                            </div>
                                                            <p>{item.name}</p>
                                                            <p>{item.role}</p>
                                                        </div>
                                                    </div>
                                                </SwiperSlide>
                                            )
                                        })
                                    }
                                </Swiper>
                            </div>
                            <div className='botm'>
                                <h2>剧照</h2>
                                <Swiper
                                    spaceBetween={50}
                                    slidesPerView={3}
                                >
                                    {
                                        shop.photos.map(item => {
                                            return (
                                                <SwiperSlide key={item}>
                                                    <div className="swiperWrapper">
                                                        <div className="swiperSlide">
                                                            <div className='banner'>
                                                                <img src={item} alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </SwiperSlide>
                                            )
                                        })
                                    }
                                </Swiper>
                            </div>
                            <div className='bottomBar'>
                                {this.state.like?<h3 onClick={this.remLike}>已点赞</h3>:<h3 onClick={this.setLike}>点赞</h3>}
                                {this.state.collect?<h3 onClick={this.remCollect}>已收藏</h3>:<h3 onClick={this.setCollect}>收藏</h3>}
                            </div>
                            <div className='Anhui' onClick={this.fanHui}>
                                    <img src="" alt="" />
                            </div>
                        </div>
                        :
                        <div>加载中</div>
                }
            </Details>
        );
    }
}

export default Detail;


